<template>
  <div class="container">
    <div class="company" v-if="param.authType==='1'">
      <p>
        <span class="label">企业名称：</span>
        {{data.name}}
      </p>
      <p>
        <span class="label">营业执照编号：</span>
        {{data.businessLicenseNo}}
      </p>
      <p>
        <span class="label">年检日期：</span>
        {{data.annualTime?data.annualTime.slice(0,10):''}}
      </p>
      <div class="pic">
        <span class="label">企业营业执照：</span>
        <ul>
          <li v-for="(item,index) in data.companyAuthFilePoList" :key="index" @click="showImg(item.filePath)">
            <img :src="item.filePath" alt />
          </li>
        </ul>
      </div>
      <el-form :model="param" ref="form" :rules="rules">
        <el-form-item label="审核结果：" prop="auditStatus">
          <el-radio-group v-model="param.auditStatus">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">不通过</el-radio>
            <el-radio :label="1">待定</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核不通过原因：" v-if="param.auditStatus===3" prop="auditCause">
          <el-input type="textarea" v-model="param.auditCause"></el-input>
        </el-form-item>
        <el-form-item class="onSubmit">
          <el-button type="primary" @click="onSubmit" :loading="loading" v-loading.fullscreen.lock="loading">确定
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="personal" v-else-if="param.authType==='2'">
      <p>
        <span class="label">个人姓名：</span>
        {{data.name}}
      </p>
      <p>
        <span class="label">身份证号码：</span>
        {{data.idCard}}
      </p>
      <div class="pic">
        <span class="label">证件照片：</span>
        <ul>
          <li v-for="(item,index) in data.companyStaffAuthFileInVoList" :key="index" @click="showImg(item.filePath)">
            <img :src="item.filePath" alt />
          </li>
        </ul>
      </div>
      <div class="pic">
        <span class="label">工作证明：</span>
        <ul>
          <li v-for="(item,index) in data.workStaffAuthFileInVoList" :key="index" @click="showImg(item.filePath)">
            <img :src="item.filePath" alt />
          </li>
        </ul>
      </div>
      <el-form :model="param" ref="form" :rules="rules">
        <el-form-item label="审核结果：" prop="auditStatus">
          <el-radio-group v-model="param.auditStatus">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">不通过</el-radio>
            <el-radio :label="1">待定</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核不通过原因：" v-if="param.auditStatus===3" prop="auditCause">
          <el-input type="textarea" v-model="param.auditCause"></el-input>
        </el-form-item>
        <el-form-item class="onSubmit">
          <el-button type="primary" @click="onSubmit" :loading="loading" v-loading.fullscreen.lock="loading">确定
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="security" v-else>
      <div class="pic">
        <span class="label">社保证明：</span>
        <ul>
          <li v-for="(item,index) in data.companySsAuthFileInVoList" :key="index" @click="showImg(item.filePath)">
            <img :src="item.filePath" alt />
          </li>
        </ul>
      </div>
      <el-form :model="param" :rules="rules" ref="form">
        <el-form-item label="审核结果：" prop="auditStatus">
          <el-radio-group v-model="param.auditStatus">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">不通过</el-radio>
            <el-radio :label="1">待定</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核不通过原因：" prop="auditCause" v-if="param.auditStatus===3">
          <el-input type="textarea" v-model="param.auditCause"></el-input>
        </el-form-item>
        <el-form-item class="onSubmit">
          <el-button type="primary" @click="onSubmit" :loading="loading" v-loading.fullscreen.lock="loading">确定
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <viewer :images="temImg" v-show="false">
      <img :src="temImg[0]" width="1" id="img">
    </viewer>
  </div>
</template>

<script>
import {
  companyAuth,
  companyStaffAuth,
  companySsAuth,
  companyAuthUpdate,
  companySsAuthUpdate,
} from '../../../../api/enterprise';
import { staffAuth, batchStaffAuth } from '../../../../api/companyAccount'

export default {
  name: '',
  data () {
    return {
      temImg: [],
      loading: false,
      param: {
        authType: '',
        auditCause: '',
        auditStatus: '',
        companyIds: ''
      },
      data: {
        name: '',
        businessLicenseNo: '',
        annualTime: '',
        companyAuthFilePoList: [],
        idCard: '',
        companyStaffAuthFileInVoList: [],
        workStaffAuthFileInVoList: [],
        companySsAuthFileInVoList: []
      },
      rules: {
        auditStatus: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
        auditCause: [
          { max: 100, message: '原因不能超过100个字' },
          { required: true, message: '请填写审核不通过原因', trigger: 'change' }
        ]
      }
    };
  },
  created () {
    console.log(this.$route.query);
    // 区分审核类型,并获取审核信息
    if (this.$route.query) {
      let authList = [, companyAuth, staffAuth, companySsAuth];
      this.param.authType = this.$route.query.index;
      console.log(this.param.authType);
      this.param.companyId = this.$route.query.id;
      console.log(authList[this.param.authType]);
      if (this.$route.query.index === '2') {
        let query = new FormData;
        query.append('companyUserId', this.$route.query.id);
        query.append('companyId', this.$route.query.companyId)
        staffAuth(query).then(res => {
          if (res.success) {
            if (res.data) {
              this.param.auditStatus = res.data.auditStatus;
              this.param.auditCause = res.data.auditCause;
              this.data = res.data;
              this.data.companyStaffAuthFileInVoList = res.data.companyStaffAuthFileInVoList ? res.data.companyStaffAuthFileInVoList.filter(item => item.type === 1) : [];
              this.data.workStaffAuthFileInVoList = res.data.workStaffAuthFileInVoList ? res.data.workStaffAuthFileInVoList.filter(item => item.type === 2) : [];
            }
          } else {
            this.$message.error(`${res.msg}`);
          }
        })
      } else {
        authList[this.param.authType]({ companyId: this.$route.query.id }).then(data => {
          console.log(data);
          if (data.success) {
            if (data.data) {
              this.param.auditStatus = data.data.auditStatus;
              this.param.auditCause = data.data.auditCause;
              this.data = data.data;
              console.log(this.data);
            }
          } else {
            this.$message.error(`${data.msg}`);
          }
        });
      }
    }
  },
  methods: {
    showImg (url) {
      this.temImg = [];
      this.temImg.push(url)
      document.getElementById("img").click();
    },
    // 提交
    onSubmit () {
      console.log(this.$refs.form);
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.param.authType === '1') {
            let query = {
              id: this.data.id,
              name: this.data.name,
              companyId: this.param.companyId,
              businessLicenseNo: this.data.businessLicenseNo,
              annualTime: this.data.annualTime,
              auditStatus: this.param.auditStatus,
              auditCause: this.param.auditCause
            };
            companyAuthUpdate(query).then(data => {
              if (data.success) {
                this.loading = false;
                this.$router.push({ path: '/companyList' });
              } else {
                this.loading = false;
                this.$message.error(`${data.msg}`);
              }
            });
          } else if (this.param.authType === '3') {
            let query = {
              id: this.data.id,
              companyId: this.param.companyId,
              auditStatus: this.param.auditStatus,
              auditCause: this.param.auditCause
            };
            companySsAuthUpdate(query).then(data => {
              if (data.success) {
                this.loading = false;
                this.$router.push({ path: '/companyList' });
              } else {
                this.loading = false;
                this.$message.error(`${data.msg}`);
              }
            });
          } else if (this.param.authType === '2') {
            // let query = {
            //   id: this.data.id,
            //   companyId: this.param.companyId,
            //   name: this.data.name,
            //   idCard: this.data.idCard,
            //   auditStatus: this.param.auditStatus,
            //   auditCause: this.param.auditCause
            // };
            let query = new FormData();
            query.append('companyUserIds', this.param.companyId)
            query.append('auditStatus', this.param.auditStatus)
            query.append('auditCause', this.param.auditCause)
            batchStaffAuth(query).then(data => {
              if (data.success) {
                this.loading = false;
                this.$router.push({ path: '/companyAccount' });
              } else {
                this.loading = false;
                this.$message.error(`${data.msg}`);
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.el-form .el-form-item /deep/ .el-form-item__error {
    left: 150px;
}
.label {
    width: 150px;
    display: inline-block;
    text-align: right;
    vertical-align: middle;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.pic {
    display: flex;
    align-items: flex-start;
}
ul {
    display: inline-block;
    list-style: none;
    overflow: hidden;
    width: 500px;
}
ul li {
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
    width: 124px;
    height: 124px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
}
ul li img {
    width: 100%;
    height: 100%;
}
.el-form {
    flex: unset;
    display: block;
}
.el-form .el-form-item {
    display: block;
    margin-bottom: 20px;
}

.el-form /deep/ label.el-form-item__label {
    width: 150px;
}
.el-form /deep/ .el-button {
    width: 150px;
    margin-left: 250px;
}
.el-form /deep/ .el-textarea {
    position: unset;
    width: 400px;
    height: 300px;
}
.el-form /deep/ .el-textarea textarea {
    width: 400px;
    height: 300px;
}
</style>